<template>
  <div class="page">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>茶圈热点</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 茶圈热点 -->
    <ul class="news-list">
      <li class="news-item" v-for="(item, index) in newsList" :key="index">
        <img class="news-img" :src="item.imgUrl" width="240" height="180">
        <div class="cont">
          <router-link class="tit" :to="'/news/newsDetail?id=' + item.id">{{item.title}}</router-link>
          <p class="desc">{{item.articleContent}}</p>
          <div class="bottom">
            <span class="creator">{{item.articleSource}}</span>
            <span class="create-time">{{item.createTime.split('.0')[0]}}</span>
          </div>
        </div>
      </li>
    </ul>
    <v-pagination ref="pagination" v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
  </div>
</template>

<script>
import vPagination from '@/components/public/pagination'
export default {
  data () {
    return {
      newsList: [],
      page: Number(this.$route.query.pg) || 1,
      pageSize: 10,
      total: 0
    }
  },
  components: {
    vPagination
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.$http.post(this.$api + '/pc/home/queryArticleList', {
        page: this.page,
        pageSize: 10
      }).then(res => {
        if (res.responseCode === '0000') {
          this.newsList = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error({
            message: res.responseMsg,
            duration: this.$store.state.duration
          })
        }
      }).catch(err => {
        console.error(err)
      })
    },
    pageChange (page) {
      this.page = page
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';

.breadcrumb {
  margin: 20px 0;
}
.news-list {
  margin-bottom: 40px;
  .news-item {
    padding: 20px 50px 20px 20px;
    height: 220px;
    border-bottom: solid 1px $border_color;
    .news-img {
      float: left;
      margin-right: 20px;
    }
    .cont {
      overflow: hidden;
      .tit {
        display: block;
        margin-top: 20px;
        font-size: 18px;
        color: $f_main;
        &:hover {
          text-decoration: none;
          color: $red;
        }
      }
      .desc {
        margin-top: 15px;
        font-size: 14px;
        color: $f_normal;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .bottom {
        margin-top: 40px;
        font-size: 14px;
        color: $f_normal;
        .create-time {
          float: right;
        }
      }
    }
  }
}
</style>
